<template>
    <div style="width: 100%;">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="详情页面">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <div>
            <el-header style="font-size: 20px;position: relative;left: -20px">
                <i class="el-icon-user-solid"></i>基本资料
            </el-header>
            <div class="base">
                <div style="padding: 10px" class="grid-content bg-purple"><span>账号:</span><br>{{hremp.userName}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>姓名:</span><br>{{hremp.empName}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>角色:</span><br>{{hremp.empPosition}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>手机号码:</span><br>{{hremp.empPhone}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>联系地址:</span><br>{{hremp.empSite}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>入职时间:</span><br>{{hremp.empEntrydate}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>邮箱地址:</span><br>{{hremp.empEmail}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>邮政编码:</span><br>{{hremp.emPostcode}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>QQ账号:</span><br>{{hremp.empQq}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>微信账号:</span><br>{{hremp.empWechat}}</div><div style="padding: 10px" class="grid-content bg-purple"><span>账号:</span><br>{{hremp.id}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>合同开发时间:</span><br>{{hremp.empContStartdate}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>合同结束时间:</span><br>{{hremp.empContEnddate}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>在职状态:</span><br>{{hremp.empWorkstatus=='N'?'未在职':'在职'}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>社保号码:</span><br>{{hremp.empSocialNum}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>性别:</span><br>{{hremp.empSex=='M'?'男':'女'}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>出生日期:</span><br>{{hremp.empBirthdate}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>最高学历:</span><br>{{hremp.empHigthEducation}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>最高学位:</span><br>{{hremp.empHigthDegree}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>照片:</span><br><button @click="look" >查看</button>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <el-header style="font-size: 20px;position: relative;left: -20px">
                <i class="el-icon-user-solid"></i>详细资料
            </el-header>
            <div class="details">
                <div style="padding: 10px" class="grid-content bg-purple"><span>证件类型:</span><br>{{hremp.empPaperstype}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>证件号:</span><br>{{hremp.empPapersnum}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>婚姻状态:</span><br>{{hremp.empMaritalsta}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>门禁号:</span><br>{{hremp.empEntrancenum}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>执业号码:</span><br>{{hremp.id}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>首次执业时间:</span><br>{{hremp.empPracdate}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>首次执业地址:</span><br>{{hremp.empPracsite}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>资格证号码:</span><br>{{hremp.empCertifynum}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>资格证取得方式:</span><br>{{hremp.empGainway}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>资格证取得地址:</span><br>{{hremp.empGainsite}}</div><div style="padding: 10px" class="grid-content bg-purple"><span>账号:</span><br>{{hremp.id}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>资格证类别:</span><br>{{hremp.hrCertifyId}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>执业类型:</span><br>{{hremp.hrPractiseId}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>执业部:</span><br>{{hremp.hrSpecialtyId}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>名族:</span><br>{{hremp.hrNationId}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>政治面貌:</span><br>{{hremp.hrPoliticalId}}</div>
                <div style="padding: 10px" class="grid-content bg-purple"><span>个人介绍:</span><br>{{hremp.empIntroduce}}</div>
            </div>
        </div>
        <el-dialog
                title="照片"
                :visible.sync="dialogVisible"
                width="20%">
            <showPhoto :empPicture="photo"></showPhoto>
        </el-dialog>
    </div>
</template>

<script>

    import Hr_empService from '../../../model/hyc/hr_emp/Hr_empService.js'
    const hr_empService =Hr_empService.getInstance();

    import showPhoto from './showPhoto.vue'


    export default {
        name: "User_details",
        props:['id'],
        data(){
            return{
                id2:this.id,
                hremp :{},
                photo:'',
                dialogVisible:false,
            }
        },
        methods:{
            getBigData(){
                hr_empService.getBigData(this.id2).then(response=>{
                    this.photo=response.data.data.empPicture
                    this.hremp=response.data.data
                })
            },
            goBack(){
                this.$emit('back')
            },
            look(){
                this.dialogVisible=true
            }
        },
        created(){
            this.id2=this.id
            this.getBigData()
        },
        components:{
            showPhoto
        }
    }
</script>


<style>
    .base,.details{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .bg-purple {
        background: #FFFFFF;
        border: 1px solid  darkgray;
        width: 23.5%;
        height: 50px;
    }
</style>
